<template>
  <div class="container-fluid">
    <div class="row school-model school-tiao">
      <div class="col school-tiao-left">
        <span>{{ clazz.name }} 学员</span>
      </div>
      <div class="col text-right">
        <a-button-group>
          <a-button type="primary" @click="setaddress2 = true">添加班级学员</a-button>
          <a-button type="primary">
            <router-link :to="{name:'班级'}" class="text-white">返回</router-link>
          </a-button>
        </a-button-group>
      </div>
    </div>
    <div class="row school-model index-model">
      <div class="col school-col-table">
        <el-form :inline="true" size="mini">
          <el-form-item label="学员姓名">
            <el-input v-model="mname" placeholder="学员姓名"></el-input>
          </el-form-item>
          <el-form-item label="手机号">
            <el-input v-model="mphone" placeholder="手机号"></el-input>
          </el-form-item>
        </el-form>
        <el-table
          :data="tableData.slice((currentPage - 1) * pagesize, currentPage * pagesize)"
          style="width: 100%; border: 1px solid #eeeeee"
        >
          <el-table-column label="序号" width="60">
            <template slot-scope="scope">{{scope.$index+1}}</template>>
          </el-table-column>
          <el-table-column prop="name" label="姓名" width="80"></el-table-column>
          <el-table-column sortable prop="sex" label="性别" width="80"></el-table-column>
          <el-table-column sortable prop="birthday" label="出生日期" width="140">
            <template slot-scope="scope">{{ totime(scope.row.birthday)}}</template>
          </el-table-column>
          <el-table-column prop="phonenum" label="手机号"></el-table-column>
          <el-table-column prop="relationship" label="联系人关系"></el-table-column>
          <el-table-column sortable prop="detailedaddress" label="校区">
            <template slot-scope="scope">{{ getschooladdressbyid( scope.row.schooladdressid).name}}</template>
          </el-table-column>
          <el-table-column sortable prop="type" label="所在班级状态"></el-table-column>

          <el-table-column label="操作" align="left" width="250px">
            <template slot-scope="scope">
              <el-button
                type="primary"
                size="mini"
                @click="add(scope.row)"
                v-show="scope.row.type==='在读'"
              >转班</el-button>
              <el-button
                size="mini"
                type="danger"
                @click="submitForm(scope.row)"
                v-show="scope.row.type==='在读'"
              >停课</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          small
          @current-change="currentChange"
          :page-size="pagesize"
          layout="total, prev, pager, next"
          :total="tableData.length"
        ></el-pagination>
        <el-dialog class="school-form" title="添加学员" width="950px" :visible.sync="setaddress2">
          <el-form :inline="true" size="mini">
            <el-form-item label="学员姓名">
              <el-input v-model="mname" placeholder="学员姓名"></el-input>
            </el-form-item>
            <el-form-item label="手机号">
              <el-input v-model="mphone" placeholder="手机号"></el-input>
            </el-form-item>
          </el-form>
          <el-table
            :data="tableData2.slice((currentPage - 1) * pagesize, currentPage * pagesize)"
            style="width: 100%; border: 1px solid #eeeeee"
          >
            <el-table-column label="序号" width="60">
              <template slot-scope="scope">{{scope.$index+1}}</template>>
            </el-table-column>
            <el-table-column prop="name" label="姓名" width="80">
              <template slot-scope="scope">
                <router-link
                  :to="{name: '学员课程详情', params: { ID: scope.row.ID }}"
                  v-text="scope.row.name"
                ></router-link>
              </template>
            </el-table-column>
            <el-table-column sortable prop="sex" label="性别" width="80"></el-table-column>
            <el-table-column sortable prop="birthday" label="出生日期" width="140">
              <template slot-scope="scope">{{ totime(scope.row.birthday)}}</template>
            </el-table-column>
            <el-table-column prop="phonenum" label="手机号"></el-table-column>
            <el-table-column prop="relationship" label="联系人关系"></el-table-column>
            <el-table-column sortable prop="detailedaddress" label="校区">
              <template
                slot-scope="scope"
              >{{ getschooladdressbyid( scope.row.schooladdressid).name}}</template>
            </el-table-column>
            <el-table-column label="操作" align="left" width="80px">
              <template slot-scope="scope">
                <el-button type="primary" size="mini" @click="submitForm2(scope.row)">保存</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-dialog>
        <el-dialog class="school-form" title="选择报名班级" width="750px" :visible.sync="setaddress">
          <el-table :data="clazzbyschooladdresid" style="width: 100%" max-height="250">
            <el-table-column prop="ID" label="ID" width="60">
              <template slot-scope="scope">
                <el-radio v-model="clazzs" name="clazzs" :label="scope.row.ID"></el-radio>
              </template>
            </el-table-column>
            <el-table-column prop="name" label="班级名称"></el-table-column>
            <el-table-column prop="type" sortable label="人数">
              <template
                slot-scope="scope"
              >{{getstudentnum(scope.row.ID)}} / {{ scope.row.studentnum }}</template>
            </el-table-column>
            <el-table-column prop="info" label="所在校区">
              <template
                slot-scope="scope"
              >{{ getschooladdressbyid( scope.row.schooladdressid).name }}</template>
            </el-table-column>
            <el-table-column prop="studentnum" sortable label="课程">
              <template
                slot-scope="scope"
              >{{ scope.row.schoolcourseid?getschoolcoursebyid( scope.row.schoolcourseid).name:'' }}</template>
            </el-table-column>
            <el-table-column prop="type" sortable label="开班日期">
              <template slot-scope="scope">{{ totime(scope.row.starttime) }}</template>
            </el-table-column>
            <el-table-column prop="studentnum" sortable label="结课日期">
              <template slot-scope="scope">{{ totime(scope.row.endtime) }}</template>
            </el-table-column>
          </el-table>
          <div slot="footer" class="dialog-footer">
            <el-button type="primary" size="mini" @click="submitForm3">确 定</el-button>
            <el-button @click="setaddress = false" size="mini">取 消</el-button>
          </div>
        </el-dialog>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import {
  asyncchangeschoolstudentschoolclazz,
  asyncstopschoolstudentschoolclazz
} from "../../../../plugins/api.js";
import { totime } from "../../../utils.js";
export default {
  name: "student",
  data() {
    return {
      setaddress2: false,
      mname: "",
      mphone: "",
      currentPage: 1,
      pagesize: 10,
      title: "添加学员",
      student: "",
      setaddress: false,
      clazzs: ""
    };
  },
  props: ["ID"],
  computed: {
    ...mapGetters([
      "getschoolstudent",
      "getschooladdress",
      "getschoolclazz",
      "getschoolcourse",
      "getschooladdressbyid",
      "getschoolcoursebyid",
      "getschoolstudentbyid"
    ]),
    tableData() {
      const { clazz, getschoolstudentbyid } = this;
      const studentschoolclazz = [];
      for (let v of clazz.schoolstudentschoolclazz) {
        const { schoolstudentid } = v;
        const {
          name,
          sex,
          relationship,
          birthday,
          schooladdressid,
          phonenum
        } = getschoolstudentbyid(schoolstudentid);
        studentschoolclazz.push({
          ...v,
          name,
          sex,
          relationship,
          birthday,
          phonenum,
          schooladdressid
        });
      }
      return studentschoolclazz.sort(v => -["在读"].indexOf(v.type));
    },
    tableData2() {
      const { getschoolstudent, clazz, mname, mphone, ID } = this;
      return getschoolstudent.filter(v => {
        const { schoolstudentschoolclazz, schooladdressid, type } = v;
        if (schooladdressid != clazz.schooladdressid) return;
        if (type !== "在读") return;
        const y = mname ? v.name.includes(mname) : true;
        const z = mphone ? v.phonenum.toString().includes(mphone) : true;
        let x = schoolstudentschoolclazz.find(
          vo => vo.type === "在读" && vo.schoolclazzid == ID
        );
        return !x && y && z;
      });
    },
    clazz() {
      const { ID, getschoolclazz } = this;
      return getschoolclazz.find(v => v.ID == ID);
    },
    clazzbyschooladdresid() {
      const { student, clazz, getschoolclazz } = this;
      if (student) {
        const { schooladdressid } = clazz;
        return getschoolclazz.filter(v => {
          const { schoolstudentschoolclazz, type } = v;
          if (v.schooladdressid != schooladdressid) return;
          if (type == "0") return;
          const n = schoolstudentschoolclazz.find(
            vo => vo.type === "在读" && vo.schoolstudentid == student
          );
          return !n;
        });
      }
      return [];
    }
  },
  methods: {
    add({ schoolstudentid, type }) {
      if (type === "停班") return;
      this.student = schoolstudentid;
      this.setaddress = true;
    },
    totime,
    getstudentnum(id) {
      const { schoolstudentschoolclazz } = this.getschoolclazz.find(
        v => v.ID == id
      );
      return schoolstudentschoolclazz.filter(v => v.type === "在读").length;
    },
    currentChange(index) {
      this.currentPage = index;
    },
    async submitForm2({ ID: schoolstudentid }) {
      const { clazz, tableData } = this;
      let students = tableData.filter(v => v.type === "在读");
      try {
        const { studentnum, name, ID: schoolclazzid } = clazz;
        const num = studentnum - students.length;
        if (num < 0) {
          await this.$confirm(
            `${name}班级的人数无法容纳这么多人，超出${-num}人, 是否继续添加?`,
            "提示",
            {
              confirmButtonText: "确定",
              cancelButtonText: "取消",
              type: "warning"
            }
          );
        }
        await asyncchangeschoolstudentschoolclazz({
          schoolclazzid,
          schoolstudentid
        });
        await this.$store.dispatch("actionschoolstudent");
        await this.$store.dispatch("actionschoolclazz");
        this.$message.success(`添加成功`);
      } catch (err) {
        this.$message.error(`失败:${err}`);
      }
      this.setaddress2 = false;
    },
    submitForm({ name, ID }) {
      const { clazz } = this;
      this.$confirm(
        `此操作将${name}的${clazz.name}停止上课, 是否继续?`,
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "danger"
        }
      )
        .then(async () => {
          try {
            await asyncstopschoolstudentschoolclazz({
              ID: ID
            });
            await this.$store.dispatch("actionschoolstudent");
            await this.$store.dispatch("actionschoolclazz");
            this.$message.success("停课成功");
          } catch (err) {
            this.$message.error("停课失败");
          }
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消停课"
          });
        });
    },
    async submitForm3() {
      const { student, clazzs, clazz } = this;
      const { ID } = clazz.schoolstudentschoolclazz.find(
        v => v.schoolstudentid == student && v.type == "在读"
      );
      if (clazzs && student && ID) {
        try {
          await asyncchangeschoolstudentschoolclazz({
            ID: ID,
            schoolclazzid: clazzs,
            schoolstudentid: student
          });
          await this.$store.dispatch("actionschoolstudent");
          await this.$store.dispatch("actionschoolclazz");
          this.$message.success(`转班成功`);
          this.setaddress = false;
        } catch (err) {
          this.$message.error(`失败:${err}`);
        }
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.index-model {
  margin-top: 13px;
}
.checkbox-group {
  padding-left: 30px;
  padding-right: 30px;
  padding-top: 15px;
  padding-bottom: 15px;
  background-color: #ededed;
}
</style>